<template>
	<div class="payment">
		<header>
			<router-link to="/mobile/myshopping"><</router-link>
			<h3>等待卖家付款 </h3>
			<button><i class="el-icon-setting"></i></button>
		</header>
			<div class="goos" v-for="item in carts.items">
			<aside class="aside1">
				<i class="el-icon-s-shop"></i>
				<h4>{{item.book.maker}}</h4>
			</aside>
			<div class="book">
				<div class="div1">
					<div class="img">
						<img :src="`${$ip}/api/public/showimg/${item.book.pic}`"/>
					</div>
						<span>{{item.book.name}}</span>
						<p>￥{{item.price}}</p>
				</div>
				<div class="div2">
					<button>7天无理由退货</button>
					<p>3天内发货</p>
				</div>
			</div>
			<div class="div3">
				<aside>
					<span>商品总价</span>
					<span>￥{{item.price}}</span>
				</aside>
				<aside>
					<span>运费</span>
					<span>￥0.00</span>
				</aside>
				<aside>
					<span>运费险</span>
					<span>￥0.00</span>
				</aside>
				<aside>
					<span>应付款</span>
					<span style="color: #f27100;">￥{{carts.amount}}</span>
				</aside>
			</div>
			<div class="div4">
				<hr />
				<aside class="aside1">
					<p>收货信息：&nbsp;&nbsp;{{carts.ship2name}},{{carts.ship2phone}},{{carts.ship2addr}}</p>
				</aside>
				<aside>
					<span>订单编号:</span>
					<span>{{carts.ordid}}</span>
				</aside>
				<aside>
					<span>下单时间:</span>
					<span>{{time}}</span>
				</aside>
			</div>
		</div>
		<div class="newbooks">
			<h3> • 猜您喜欢 • </h3>
			<MobileHomeList proptitle="新书上市" :proplist='newslist'></MobileHomeList>
		</div>
		<div class="footer">
			<button><router-link to="/mobile/myorders">取消付款</router-link></button>
			<button @click="Payment()">付款</button>
		</div>
	</div>
</template>

<script>
import MobileHomeList from '@/components/mobile/home/MobileHomeList.vue'
export default {
	name:'Payment',
	components:{
		MobileHomeList
	},
	data(){
		return{
			newslist:[],
			goos:[],
			carts:{}
		}
	},
	computed:{
		time(){
			let date =new Date();
			let year =date.getFullYear();
			let month =date.getMonth() + 1;
			let day =date.getDate();
			let hours =date.getHours();
			let minutes =date.getMinutes();
			let k =`${year}-${month}-${day}-${hours}:${minutes}`;
			return k;
		}
	},
	methods:{
		Payment(){
			this.$postkv("/api/fore/ord/addPay/"+this.$route.query.id).then((resp)=>{
				if(resp.data.code==200){
					this.$message({
				      message: resp.data.msg,
				      type: 'success'
					});
					this.$router.push({path:'/mobile/myorders'});
				}else{
					this.$message.error('支付失败')
				}
			})
		}
	},
	mounted(){
		//新书推荐
		this.$get("/api/public/findPageBook/1/12/0").then((resp)=>{
			this.newslist =resp.data.data.books;
			console.log(this.newslist);
		})
		console.log(this.goos);
		this.$get("/api/fore/ord/findByOrdid/"+this.$route.query.id).then((resp)=>{
			this.carts =resp.data.data;
			console.log(this.carts);
			if(resp.data.data.ship2addr==null){
				this.$message.error('请先填写地址信息');
				return this.$router.push({path:'/mobile/myaddr'});
			}
		})
	}
}
</script>

<style scoped>
a{
	color: white;
	margin: 0;
	padding: 0;
}
.payment{
	width: 100%;
	background-color: #eeeeee;
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
}
.payment header{
	width: 96%;
	line-height: 3rem;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
}
.payment header h3{
	margin-right: 9rem;
}
.payment header a {
	font-size: 1.8rem;
	line-height: 3rem;
	color: #000000;
}
.payment header button{
	border: none;
	background-color: #eeeeee;
	font-size: 16px;
}
.payment header button i{
	font-size: 20px;
}
.payment .goos{
	width: 96%;
	margin: 0 auto;
	background-color: #ffffff;
	margin-top: 0.8rem;
	border-radius: 6px;
}
.payment .goos .aside1{
	width: 96%;
	margin: 0 auto;
	display: flex;
}
.payment .goos .aside1 i{
	font-size: 30px;
	color: #555555;
	margin-top: 0.8rem;
	margin-left: 0.5rem;
}
.payment .goos .aside1 img{
	width: 1.3rem;
	height: 1.3rem;
	margin-left: 0.5rem;
	margin-top: 0.8rem;
}
.payment .goos h4{
	margin-top: 1rem;
	margin-left: 0.5rem;
}
.payment .goos .div2{
	width: 50%;
	font-size: 13px;
	position: relative;
	bottom: 5rem;
	left: 8rem;
}
.payment .goos .div2 button{
	color: #f27100;
	border: 1px solid #fb8600;
	background-color: white;
	border-radius: 4px;
	font-size: 10px;
}
.payment .goos .div2 p{
	line-height: 1.8rem;
	margin-top: 2rem;
	background-color: #eeeeee;
	border-radius: 4px;
	text-indent: 0.5em;
}
.payment .goos .book{
	width: 98%;
	margin: 0 auto;
	height: 10rem;
}
.payment .goos .book .div1{
	margin: 0 auto;
	display:flex;
	align-items: center;
	justify-content: space-around;
	margin-top: 1rem;
}
.payment .goos .book .div1 span{
	width: 13rem;
	margin-bottom: 4.5rem;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.payment .goos .book p{
	margin-bottom:4.5rem;
}
.payment .goos .book .img{
	width: 7rem;
	height: 7rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 4px;
	background-color: #eeeeee;
	margin-top: 1rem;
}
.payment .goos .book .img img{
	width: 90%;
	height: 90%;
}
.payment .goos .div3{
	margin-bottom: 1rem;
}
.payment .goos .div3 aside{
	width: 94%;
	margin: 0 auto;
	color: #8b8b8b;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.payment .goos .div4 aside{
	width: 94%;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 10px;
	padding-bottom: 20px;
	color: #555555;
}
.payment .goos .div4 .aside1 p{
	width: 100%;
	height: auto;
	word-wrap: break-word;
	word-break: break-all;
	overflow: hidden;
}
.payment .goos .div4 hr{
	width: 94%;
	border: 1px solid #e7e7e7;
}
.payment .goos .div3 aside span{
	margin: 4px;
}
.payment .newbooks{
	width: 96%;
	motion: 0 auto;
	margin-top: 1rem;
}
.payment .newbooks h3{
	text-align: center;
	color: #707070;
}
.payment .footer{
	width: 100%;
	height: 3rem;
	line-height: 3rem;
	background-color: white;
	display: flex;
	align-items: center;
	/* 粘性定位 */
	position: fixed;
	bottom: 0;
	border-top: 1px solid #737373;
}
.payment .footer button:nth-last-child(2){
	width: 6rem;
	color: white;
	background-color:#8b8b8b;
	height: 2rem;
	line-height: 2rem;
	border: none;
	border-radius: 10px;
	margin-top: 0.2rem;
	margin-left: 13rem;
}
.payment .footer button:nth-last-child(1){
	width: 6rem;
	color: white;
	background-color: red;
	height: 2rem;
	line-height: 2rem;
	border: none;
	border-radius: 10px;
	margin-top: 0.2rem;
	margin-left: 0.5rem;
}
</style>
